<template>
  <div class="container" @mouseover="setIsHoverTrue" @mouseout="setIsHoverFalse">
    <el-card class="examCard" shadow="hover">
      <div slot="header" class="header">
        <el-tag class="status" v-if="examStatus==='在进行'" type="warning" effect="plain"> {{ examStatus }}</el-tag>
        <el-tag class="status" v-else-if="examStatus==='已结束'" type="success" effect="plain">{{ examStatus }}</el-tag>
        <el-tag class="status" v-else-if="examStatus==='未开始'" type="info" effect="plain">{{ examStatus }}</el-tag>
        <div class="exam_name">{{exam.exam_name}}</div>
      </div>
      <div class="body">
        <div class="description">{{exam.exam_description}}</div>
        <div class="open_date">{{"考试开始时间："+exam_open_time}}</div>
        <div class="close_date">{{"考试结束时间："+exam_close_time}}</div>
        <div class="limit_time">{{"限时："+limit_time}}</div>
        <el-button v-if="examStatus==='在进行'" class="Card_button" type="text" @click="enterExam">进入考试</el-button>
        <el-button v-else-if="examStatus==='已结束'" class="Card_button" type="text" @click="myAnswerDetail">查看我的答题详情</el-button>
        <el-button v-else-if="examStatus==='未开始'" class="Card_button" type="text" disabled>考试暂未开始</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  name: "examCard",
  computed:{
    exam_open_time:function () {

      return moment(this.exam.exam_open_time).format('YY-MM-DD HH:mm')
    },
    exam_close_time:function (){
      return moment(this.exam.exam_close_time).format('YY-MM-DD HH:mm')
    },
    limit_time:function(){
      let duration = moment.duration(Number(new Date(this.exam.limit_time)));
      return duration.hours()+"小时"+duration.minutes()+"分钟" + duration.milliseconds()+"秒";
    },
    examStatus:function () {
      let time = new Date();

      if(new Date(this.exam.exam_open_time)>time) return"未开始"
      else if(new Date(this.exam.exam_close_time)<time)return"已结束"
      else return "在进行"
    }
  },
  props: {
    exam:{
      type:Object,
      default: function () {
      }
    }
  },
  data() {
    return{
      isHover:false,
    }
  },
  methods:{
    setIsHoverTrue(){
      this.isHover = true;
    },
    setIsHoverFalse(){
      this.isHover = false;
    },
    enterExam(){
        this.$emit('enterExam',this.exam)
    },
    myAnswerDetail(){
        this.$emit('myAnswerDetail',this.exam);
    }
  }

}
</script>

<style scoped lang="less">
.container{
  margin:0;
  height:inherit;
  width:100%;
  padding:0;
  .examCard{
    height:inherit;
    border:2px solid rgb(255, 255, 255);
    border-radius:35px;
    //transition: all 250ms cubic-bezier(.02, .01, .47, 1);
    transition-delay: 0.04s;
    transition-duration:0.7s;


    &:hover{
      transform: translate(0,-5px);
      border-radius:15px;
      transition-delay: 0.13s;
      transition-duration:0.7s;
    }
    .header{

      .status{
        float: right;
      }
    }
    .body{
      position:relative;
      top:50%;
      //margin-top:50%;
      //margin:0 auto;
      //transform:translate(0%,-50%);
      //height:100%;
      .description{
        overflow:hidden;
        display:block;
        height:100%;
        width:100%;
      }
      .open_date,.close_date,.limit_time{
        font-size:0.8rem;
        font-weight:600;
      }
      .create_date{

      }
    }
  }

}
.exam_name{
  font-size:1rem;
  font-weight:700;
  color: #384531
}


</style>